
var currentDivId ="";
var store = Ext.create('Ext.data.TreeStore', {
    root: {
        expanded: true,
        children: [
            { text: "Location", expanded: true, children: [
                { text: "S001", leaf: true },
                { text: "S002", leaf: true},
                { text: "S003", leaf: true},
                { text: "S004", leaf: true},
                { text: "S005", leaf: true},
                { text: "S006", leaf: true},
                { text: "S007", leaf: true},
                { text: "S008", leaf: true}
            ] },
        ]
    }
});

var menu = new Ext.menu.Menu({  
        items : [{  
            text : '清空'  ,
            handler:function(e){
            	var currentDiv = document.getElementById(currentDivId);
            	var value = currentDiv.innerHTML;
            	if(value=="Fail Loc"||value=="Current Loc"||value=="From Loc"){
            		return;
            	}else{
            		currentDiv.style.borderStyle = 'dashed';
            		currentDiv.style.color = '#D8D8D8';
            		var color = currentDiv.style.borderColor;
            		if (color.trim()=='red') {
            			currentDiv.innerHTML="Fail Loc"
            		}else if(color.trim()=='green'){
            			currentDiv.innerHTML="Current Loc"
            		}else if(color.trim()=='blue'){
            			currentDiv.innerHTML="From Loc"
            		}
            	}
            }
        }, {
        	text:'删除',
        	handler:function(e){
            	var currentDiv = document.getElementById(currentDivId);
            	var color = currentDiv.style.borderColor;
            	if (color.trim()=='red') {
            		currentDiv.parentNode.removeChild(currentDiv.nextSibling);
            		currentDiv.parentNode.removeChild(currentDiv);
            	}else if(color.trim()=='green'){
            		alert("Can not delete Current Location!");
            	}else if(color.trim()=='blue'){
            		currentDiv.parentNode.removeChild(currentDiv);
            	}
            }
        }]  
    });  
Ext.onReady(function(){

    
	var j= 1;
	var k=0;
	var bigDiv ={
		id:'bigDivId',
		tag :'div' ,
		html:'',
		style:'width:900px; height:2000px; margin:0 0 0 0 ; position:relative;'
	};

	var big ;

	Ext.create('Ext.panel.Panel', {
		width: '100%',
		height:'100%',
		title: 'Border Layout',
		layout: 'border',
		items: [{

			title: 'South Region is resizable',
			region: 'south',     
			xtype: 'panel',
			height: 60,
			split: true,        
			margins: '0 5 5 5'
		},{
			//left
			id:'dragPanel',
			title: 'West Region is collapsible',
			region:'west',
			xtype: 'panel',
			margins: '5 0 0 5',
			width: 200,
			height:100,
			//collapsible: true,   
			id: 'west-region-container',
			layout: 'fit',
			items:[{
				id:'dragTreepanel',
				xtype:'treepanel',
				store: store,
    			rootVisible: false,
    			listeners:{
    				itemmouseenter : function( view, record, item, index, e){
    					var tree = Ext.getCmp('dragTreepanel');
    					var text = record.get('text');
						var leaf = record.get('leaf');
						if (leaf) {
							if(!item.draggable){
								var targetItem = new Ext.dd.DragSource(item, { group: 'carsDDGroup' });
								item.draggable=true;
								targetItem.afterDragDrop = function(target, e, id) {
						            var destEl = Ext.get(id);
						            //var srcEl = Ext.get(this.getEl());
						            //var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red
						            destEl.dom.innerHTML = text; //设置目标id的背景色
						            

						            destEl.dom.style.borderStyle = 'solid';
						            destEl.dom.style.color = 'black'; 
						        };
							}
						};
    				}
    			}

			}]
		},{
			id:'dropPanel',
			title: 'Center Region',
			region: 'center',    
			xtype: 'panel',
			layout: 'hbox',
			//height:300,
			margins: '5 5 0 0',
			autoScroll:true,
			listeners:{
				afterrender: function(){
					var dropPanel = Ext.getCmp('dropPanel');
					//dropPanel.body.dom.style.overflow='scroll';
					var firstElArray ={
						id:'outDiv'+0,
						tag :'div' ,
						html:'',
						style:'width:900px; height:30px; margin:30 0 0 0 ;  position:relative;'
					}

					var failLoc = {
						id :  Ext.id(),
						tag : 'div',  
						html :  'Fail Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed red;width:100px; height:30px;  left:100px; position:absolute;' 
					}


					var leftImage = {
						id :  Ext.id(),  
						tag : 'img',  
						src:'/home/mercy/Documents/projects/ext-project/document-mapping/static/images/left.png',
						style : 'width:50; left:200px;top:5px; position:absolute;'
					};

					var passLoc ={
						id :  Ext.id(),  
						tag : 'div',  
						html :  'Current Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed green;width:100px; height:30px; left:250px; position:absolute;'
					};

					var fromLoc = [{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;'
					}];

					var steps = {
						id: 'step'+0,
						tag:'h',
						html:'10',
						style:'font-weight: bold; padding:5px 0 0 0; text-align:center;width:25;height:25;border-radius:20px;background-color:#696262; color: white;left:50px; position:absolute;'
					}


					big  = Ext.DomHelper.append(dropPanel.body, bigDiv,true); 
					var first  = Ext.DomHelper.append(big, firstElArray,true); 
					Ext.DomHelper.append(first,failLoc);
					Ext.DomHelper.append(first,leftImage);
					Ext.DomHelper.append(first,passLoc);
					Ext.DomHelper.append(first,fromLoc);
					Ext.DomHelper.append(first,steps);
					canDrop(failLoc);
					canDrop(passLoc);
					canDrop(fromLoc);

				}
			},
			tbar:[{
				xtype:'checkbox',
				id:'selectAllId',
				boxLabel :'全选',
				disabled : true,
				checked :false,
				handler: function(){
					var selectAll = Ext.getCmp('selectAllId');
					if(selectAll.checked){
						if(j !=0 ){
							for (var i = 0; i < j; i++) {
								var checkBox = document.getElementById('checkbox'+i);
								if (checkBox&&!checkBox.checked) {
									checkBox.checked=true;
								}
							};
						}
					}else{
						if(j !=0 ){
							for (var i = 0; i < j; i++) {
								var checkBox = document.getElementById('checkbox'+i);
								if (checkBox&&checkBox.checked) {
									checkBox.checked=false;
								}
							};
						}
					}
				}
			},'-',{
				xtype:'button',
				text:'',
				iconCls:'add',
				width:25,

				autoScroll :true,
				handler : function() {  
					
					var dropPanel = Ext.getCmp('dropPanel');
					//alert(dropPanel.body.dom.childNodes.length);
					var body = dropPanel.body;
					var childNodes = dropPanel.body.dom.childNodes;
					dropPanel.body.dom.style.height='1000px';
					Ext.getCmp('selectAllId').setDisabled(false);

					/*if (childNodes.length>0) {
						for (var i = 0; i < childNodes.length; i++) {
							if(childNodes[i].textContent==''){
								alert(i);
								body.dom.removeChild(childNodes[i]);
							}
						};
					};*/
					var firstElArray ={
						id:'outDiv'+j,
						tag :'div' ,
						html:'',
						style:'width:900px; height:30px; margin:30 0 0 0 ;  position:relative;'
					}

					var checkbox = {
						id :  'checkbox'+j,
						tag : 'input',
						type:'checkbox',  
						style : 'left:20px; position:absolute;' 
					}

					var failLoc = {
						id :  Ext.id(),
						tag : 'div',  
						html :  'Fail Loc',  
						onclick :'itemClick()',
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed #FD0C0C;width:100px; height:30px;  left:100px; position:absolute;' 
					}



					var leftImage = {
						id :  Ext.id(),  
						tag : 'img',  
						src:'/home/mercy/Documents/projects/ext-project/document-mapping/static/images/left.png',
						style : 'width:50; left:200px;top:5px; position:absolute;'
					};

					var passLoc ={
						id :  Ext.id(),  
						tag : 'div',  
						html :  'Current Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed green;width:100px; height:30px; left:250px; position:absolute;'
					};

					var downImage = {
						id :  Ext.id(),  
						tag : 'img',  
						src:'/home/mercy/Documents/projects/ext-project/document-mapping/static/images/down.png',
						style : 'height:30px; left:285px; top:-30px ; position:absolute;'
					};
					
					var fromLoc = [{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:400px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:520px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px;  left:640px; position:absolute;'
					},{
						id :  Ext.id(),  
						tag : 'div',  
						html :  'From Loc',  
						style : 'font-weight:bold; padding:6px 0 0 0; text-align:center;color:#D8D8D8;border: 1px dashed blue;width:100px; height:30px; left:760px; position:absolute;'
					}];


					var steps = {
						id: 'step'+j,
						tag:'h',
						html:'',
						style:'font-weight: bold; padding:5px 0 0 0; text-align:center;width:25;height:25;border-radius:20px;background-color:#696262; color: white;left:50px; position:absolute;'
					}



					var first  = Ext.DomHelper.append(big, firstElArray,true);
					if(j ==0){
						Ext.DomHelper.append(first,checkbox);
						Ext.DomHelper.append(first,failLoc);
						Ext.DomHelper.append(first,leftImage);
						Ext.DomHelper.append(first,passLoc);
						Ext.DomHelper.append(first,fromLoc);
					}else if(j!=0){
						Ext.DomHelper.append(first,checkbox);
						Ext.DomHelper.append(first,failLoc);
						Ext.DomHelper.append(first,leftImage);
						Ext.DomHelper.append(first,passLoc);
						Ext.DomHelper.append(first,downImage);
						Ext.DomHelper.append(first,fromLoc);
						Ext.DomHelper.append(first,steps);
					}
					var sibling  = document.getElementById('outDiv'+j).previousSibling;
					document.getElementById('outDiv'+j).lastChild.innerHTML = parseInt(sibling.lastChild.innerHTML)+10;
					// alert(sibling.lastChild.innerHTML);
					j = j+1;
					canDrop(failLoc);
					canDrop(passLoc);
					canDrop(fromLoc);
				} 
			},'-',{
				xtype:'button',
				text:'',
				iconCls:'delete',
				width:25,
				handler: function(){
					var bigDiv = document.getElementById('bigDivId');
					if(j !=0 ){
						for (var i = 0; i < j; i++) {
							//alert(i);
							var checkBox = document.getElementById('checkbox'+i);
							if (checkBox&&checkBox.checked) {
								checkBox.parentNode.parentNode.removeChild(checkBox.parentNode);
							}
						};
					}
					if(Ext.getCmp('selectAllId').checked){
						Ext.getCmp('selectAllId').setValue(false);
					}
					
					if (bigDiv.childNodes.length>1) {
						for (var i = 1; i < bigDiv.childNodes.length; i++) {
							var sibling = bigDiv.childNodes[i].previousSibling;
							bigDiv.childNodes[i].lastChild.innerHTML =  parseInt(sibling.lastChild.innerHTML)+10;
						}
					}	
					else{
						Ext.getCmp('selectAllId').setDisabled(true);
					};

				}
			}]
		}],
		renderTo: Ext.getBody()
	});
});


function canDrop(elArray){
	
	if(elArray.length){
		for (var i = 0; i < elArray.length; i++) {
			if ( elArray[i].html=='') {
			//alert("Target Location can not be null!");
			};
			Ext.create('Ext.dd.DDTarget', elArray[i].id ,'carsDDGroup'); 
			Ext.get(elArray[i].id).addListener('contextmenu', function(e){
				e.stopEvent(); 
				currentDivId = e.target.id;
				menu.showAt(e.getXY());  
				
			});
		};
	}else{
			Ext.create('Ext.dd.DDTarget', elArray.id ,'carsDDGroup'); 

			Ext.get(elArray.id).addListener('contextmenu', function(e){
				e.stopEvent(); 
				currentDivId = e.target.id;
				menu.showAt(e.getXY());  
				
			});
	}
	
}
